<template>
  <div style="display: flex; justify-content: end; margin-bottom: 10px">
    <!-- <el-button type="primary" @click="showModal">添加用户</el-button> -->
    <div>
      <el-input
        v-model="queryInfo.keyword"
        placeholder="输入关键词查询"
        style="width: 200px; margin-right: 10px"
      ></el-input>
      <el-button type="" @click="getUserList">查询</el-button>
    </div>
  </div>
  <div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        height="450px"
      >
        <!-- <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.pageSize"
          label="编号"
          width="60"
          align="center"
        ></el-table-column> -->
        <el-table-column prop="userName" label="用户名称"></el-table-column>
        <el-table-column prop="userCode" label="用户账号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>

        <el-table-column prop="password" label="用户密码"></el-table-column>
        <el-table-column prop="role" label="用户权限">
          <template #default="scope">
            {{ scope.row.role === 1 ? '管理员' : '普通用户' }}
          </template>
        </el-table-column>
        <el-table-column prop="mobilePhone" label="电话号码"></el-table-column>

        <el-table-column prop="imageUrl" label="头像图片">
          <template #default="scope">
            <img
              :src="origin + scope.row.imageUrl"
              alt=""
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="简介"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="showModal(scope.row)"
            />
            <el-popconfirm
              title="你确定删除吗?"
              @confirm="deleteUserById(scope.row.id)"
              confirm-button-text="确定"
              cancel-button-text="取消"
            >
              <template #reference>
                <el-button :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        />
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      @close="handleClose"
      width="500px"
      title="编辑用户"
    >
      <el-form :model="editForm">
        <el-form-item
          label="用户名称"
          :label-width="formLabelWidth"
          prop="userName"
        >
          <el-input v-model="editForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电话号码"
          :label-width="formLabelWidth"
          prop="mobilePhone"
        >
          <el-input
            v-model="editForm.mobilePhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="启用状态" :label-width="formLabelWidth">
          <!-- <el-input v-model="editForm.status" autocomplete="off"></el-input> -->
          <el-radio :value="1" v-model="editForm.status">启用</el-radio>
          <el-radio :value="2" v-model="editForm.status">禁用</el-radio>
        </el-form-item>
        <el-form-item
          label="用户权限"
          :label-width="formLabelWidth"
          prop="status"
        >
          <el-select v-model="editForm.role" placeholder="">
            <el-option label="管理员" :value="1"></el-option>
            <el-option label="普通用户" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="简介"
          :label-width="formLabelWidth"
          prop="description"
          type="textarea"
        >
          <el-input
            v-model="editForm.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editSubmit">保存修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star
} from '@element-plus/icons-vue'
</script>
<script>
import { Edit } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
// import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import { userList, updateUser, deleteUser } from '../api/user'

export default {
  data() {
    return {
      origin: 'http://43.136.166.102:8090',
      total: 0,
      formLabelWidth: 100,
      dialogVisible: false,
      tableData: [],
      queryInfo: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      editForm: {
        id: '',
        userName: '',
        mobilePhone: '',
        description: ''
      },
      type: 'create'
    }
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getUserList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getUserList()
    },
    showModal(row) {
      console.log(row)
      this.dialogVisible = true
      this.editForm = row
    },
    handleClose() {},
    handleSubmit() {},
    getUserList() {
      userList(this.queryInfo).then((res) => {
        this.total = res.total
        this.tableData = res.records
      })
    },
    editSubmit(formName) {
      this.dialogVisible = false
      updateUser(this.editForm).then((res) => {
        // this.$message.success("操作成功！");
        this.getUserList()
      })
    },
    deleteUserById(id) {
      deleteUser(String(id)).then(() => {
        this.getUserList()
        ElMessage.success('删除成功！')
      })
    }
  },
  created() {
    this.getUserList()
  }
}
</script>
<style lang="less" scoped>
.adder {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 20px 0;
}

.el-tab-pane {
  padding: 0 20px;
  padding-left: 40px;
}
</style>
